import { FunctionalComponent as FC, inject, type Ref } from "vue"
// import useUtils from "../../hooks/useUtils"
import { useRoleStore } from "@/store"
import RoleSetting from "../RoleSetting"
import "./index.less"
interface Prop {
  form: {
    [x: string]: any
  };
  formRef: {
    dom: any
  }
  disabled: boolean
}
interface DialogInject {
  addRoleForm: Ref<{name: string, description: string, permIds: number[]}>
  checkall: Ref<boolean>
  indeterminate: Ref<boolean>
  setCheckVal: (val: boolean) => void
  setIndetVal: (val: boolean) => void
}

const DialogForm: FC<Prop, any> = (props, ctx) => {
  const dialogState = inject<DialogInject>("dialogState")
  const roleStore = useRoleStore()
  const setRef = (el: any) => {
    if (el) {
      props.formRef.dom = el
    }
  }
  const handleChangeAll = (checked: boolean) => {
    dialogState && (dialogState.indeterminate.value = false)
    roleStore.allDataConfig.map(item => {
      item.indeterminate = false
      item.checked = checked
    })
    if (dialogState) {
      dialogState.setCheckVal(checked)
      if (checked) {
        props.form.permIds = [
          ...props.form.permIds,
          ...roleStore.allDataConfig.map(item => item.id)
        ]
      } else {
        props.form.permIds = []
      }
    }
  }

  return (
    <a-form model={props.form} ref={setRef} disabled={props.disabled} auto-label-width>
      <a-form-item
        field="name"
        label="角色名称"
        required
        rules={[{ required: true, type: 'string', message: '角色名称不能为空' }]}
        validate-trigger={['change', 'input', 'blur']}
      >
        <a-input
          v-model={props.form.name}
          style={{ height: '32px' }}
          placeholder="请输入"
          allow-clear
          max-length={20}
          show-word-limit
        />
      </a-form-item>
      <a-form-item
        field="description"
        label="角色描述"
        required
        rules={[{ required: true, type: 'string', message: '角色描述不能为空' }]}
        validate-trigger={['change', 'input', 'blur']}
      >
        <a-input
          v-model={props.form.description}
          style={{ height: '32px' }}
          placeholder="请输入"
          allow-clear
          max-length={50}
          show-word-limit
        />
      </a-form-item>
      <a-form-item
        field="permIds"
        class="role-setting"
        label="权限设置"
        required
        rules={[{ required: true, type: 'string', message: '权限设置不能为空' }]}
        validate-trigger={['change', 'input', 'blur']}
      >
        <a-checkbox
          model-value={dialogState?.checkall.value}
          indeterminate={dialogState?.indeterminate.value}
          class="allcheck"
          onChange={handleChangeAll}
        >
          全部
        </a-checkbox>
        {/* <a-checkbox-group model-value={props.form.permIds} onChange={handleChange}> */}
          <RoleSetting />
        {/* </a-checkbox-group> */}
      </a-form-item>
    </a-form>
  )
}

export default DialogForm